<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-user" />
              总人数
            </span>
          </div>
          <div>
            <h1 style="font-size:150%;color:#909399">{{total}}</h1>
            <br />
            <p style="float:right;color:#909399">
              {{total}}人
              <i class="el-icon-user" />
            </p>
          </div>
          <br />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-male" />
              男生人数
            </span>
          </div>
          <div>
            <h1 style="font-size:150%;color:#909399">{{ns}}</h1>
            <br />
            <p style="float:right;color:#909399">
              {{ns}}人
              <i class="el-icon-male" />
            </p>
          </div>
          <br />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-female" />
              女生人数
            </span>
          </div>
          <div>
            <h1 style="font-size:150%;color:#909399">{{vs}}</h1>
            <br />
            <p style="float:right;color:#909399">
              {{vs}}人
              <i class="el-icon-female" />
            </p>
          </div>
          <br />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-trophy-1" />
              就业人数
            </span>
          </div>
          <div>
            <h1 style="font-size:150%;color:#909399">{{jy}}</h1>
            <br />
            <p style="float:right;color:#909399">
              {{jy}}人
              <i class="el-icon-trophy-1" />
            </p>
          </div>
          <br />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cla:"",
      total:0,
      ns:0,
      vs:0,
      jy:0
    };
  },
  methods:{
    dataIN(){
      //加载数据
      console.log(this.cal)
      this.$axios({
        url: this.$axios.defaults.baseURL+"/teacher/selectechartsclass",
        method: "get",
        params:{
          cla:this.cla
        }
      }).then(res => {
        for(let i = 0;i < res.data.length;i++){
          this.total += res.data[i].total;
          this.jy += res.data[i].ytotal;
          if(res.data[i].sex=='男'){
            this.ns += res.data[i].total;
          }else if(res.data[i].sex=='女'){
            this.vs += res.data[i].total;
          }
        }
      })
    },
  },
  mounted() {
    if(sessionStorage.getItem("headcla") == null || sessionStorage.getItem("headmajor") == null){
      //查询个人信息
      this.$axios({
        url: this.$axios.defaults.baseURL+"/teacher/selectinfo",
        method: "get",
        params:{
          uid:sessionStorage.getItem("headuid")
        }
      }).then(res => {
        let cla = res.data.major+res.data.cla+"班";
        this.cla = cla;
        sessionStorage.setItem("headcla",cla);
        sessionStorage.setItem("headmajor",res.data.major);
        this.dataIN()
      })
    }else {
      this.cla = sessionStorage.getItem("headcla");
      this.dataIN()
    }
  },
};

</script>
<style scoped>
#cycle {
  width: 30px;
  height: 25px;
  float: right;
  border-radius: 3px;
  color: white;
  padding-left: 10px;
}
</style>